<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible.sync="show"
      width="900px"
      @close="close()"
    >
      <el-row>
        <el-col :span="6">【题型】：{{ preview.questionType | tx }}</el-col>
        <el-col :span="6">【编号】：{{ preview.id }}</el-col>
        <el-col :span="6">【难度】：{{ preview.difficulty | nd }}</el-col>
        <el-col :span="6">【标签】：{{ preview.tags }}</el-col>
        <el-col :span="6">【学科】：{{ preview.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ preview.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ preview.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：
      <div v-html="preview.question" style="color: blue"></div>
      <div v-if="preview.questionType !== '3'">
        <div style="padding-bottom: 5px">
          {{ preview.questionType | tx }} 选项：（以下选中的选项为正确答案）
        </div>
        <div
          v-for="item in preview.options"
          :key="item.code"
          style="padding: 8px 0"
        >
          <el-radio
            v-if="preview.questionType === '1'"
            :value="item.isRight"
            :label="1"
            >{{ item.title }}</el-radio
          >
          <el-checkbox
            v-if="preview.questionType === '2'"
            :value="item.isRight ? true : false"
            >{{ item.title }}</el-checkbox
          >
        </div>
      </div>
      <hr />
      【参考答案】：<el-button
        type="danger"
        size="small"
        @click="preivewVideo()"
        >视频答案预览</el-button
      >
      <div class="video" v-show="Video">
        <video ref="video" :src="preview.videoURL" controls></video>
      </div>
      <hr />
      【答案解析】：
      <div style="display: inline-block" v-html="preview.answer"></div>
      <hr />
      【题目备注】：{{ preview.remarks }}
      <div slot="footer">
        <el-button type="primary" @click="show = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'questions-preview',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  filters: {
    nd (value) {
      if (value) return difficulty.find((item) => item.value === +value).label
    },
    tx (value) {
      if (value) {
        return questionType.find((item) => item.value === +value).label + '题'
      }
    }
  },
  data () {
    return {
      show: false,
      Video: false,
      preview: {}
    }
  },
  methods: {
    // 打开
    async open () {
      this.show = true
      const { data } = await detail({ id: this.data.id })
      this.preview = data
    },
    preivewVideo () {
      this.Video = true
      this.$refs.video.play()
    },
    // 关闭
    close () {
      this.Video = false
      this.$refs.video.pause()
    }
  }
}
</script>

<style scoped lang="scss">
.questions-preview {
  .el-col {
    padding: 10px 0;
  }
}
.video {
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
